<template>
  <div class="app-container">
    <list-admin :key="componentRefresh" v-model="listData" :entity-conf="entity" :list-display="fields"
      :list-filter="filters" :disabled-actions="disabled" :query="query">
      <!-- <template v-slot:extraAction="{ data }">
        <el-button size="small" @click="dialog.data = data.roles; dialog.pk = data.id; dialog.visible = true;">
          修改权限
        </el-button>
      </template> -->
    </list-admin>

    <el-dialog title="修改权限" :visible.sync="dialog.visible" width="40%">
      <span>
        <el-select v-model="dialog.data" multiple placeholder="请选择权限" style="width: 100%;">
          <el-option v-for="item in dialog.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ListAdmin from '@/components/EasyAdmin/ListAdmin'
  import admin from '@/config'
  import EntityManage from '@/utils/entity'

  export default {
    components: { ListAdmin },
    data() {
      return {
        // em: new EntityManage('User'),
        entity: '',
        config: {},
        fields: [],
        filters: null,
        listData: [],
        componentRefresh: 0,

        dialog: {
          visible: false,
          pk: null,
          data: null,
          options: [
            { value: 'ROLE_USER', label: '用户' },
            { value: 'ROLE_STORE', label: '门店管理员' }
          ]
        }
      }
    },
    created() {
      // Load entities data
      this.alias = 'StoreUser'

      if (!Object.keys(admin.entities).includes(this.alias)) {
        console.log('NO!')
      } else {
        this.config = admin.entities[this.alias]
        this.entity = Object.keys(this.config).includes('entity') ? this.config.entity : this.alias
        this.fields = this.config.list.list_display
        this.filters = this.config.list.list_filter
        this.query = this.config.list.query
        this.disabled = this.config.list.disabled_actions
      }
    },
    methods: {
      submit() {
        const id = localStorage.getItem('storeId')
        this.axios.put(`/store/${id}`, { roles: this.dialog.data })
          .then(res => { this.$message({ type: 'success', message: '权限修改成功' }) })
          .catch(err => this.$message({ type: 'error', message: '权限修改失败' }))
          .finally(() => { this.dialog.visible = false; this.componentRefresh++ })
      }
    }
  }
</script>